<script setup lang="ts">
import useComp from '@renderer/composables/useComp'
import useProj from '@renderer/composables/useProj'
import useRecord from '@renderer/composables/useRecord'
import useTeam from '@renderer/composables/useTeam'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const tableDate = ref<RecordModel[]>([])
const route = useRoute()
const { find: findTeam, team } = useTeam()
const { find: findProj, proj } = useProj()
const { find: findComp, comp } = useComp()
const { all: allRecord, recordDbs } = useRecord()
const { id } = route.params
const columns = [
  { id: 1, label: '工程', prop: 'proj.shortName', width: '200' },
  { id: 2, label: '分包商', prop: 'comp.shortName', width: '200' },
  { id: 3, label: '管控日期', prop: 'date', width: '' }
]
const init = async () => {
  await findTeam(+id)
  await allRecord({ teamId: +id })
  tableDate.value = []
  for await (const re of recordDbs.value) {
    const { projId, compId, date } = re
    await findProj(projId)
    await findComp(compId)
    tableDate.value.push({
      date,
      proj: proj.value!,
      comp: comp.value!,
      team: team.value!,
      isDb: true
    })
  }
}
init()
</script>

<template>
  <el-card shadow="always" class="page-team">
    <template #header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ name: 'teamList' }">班组信息列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ team?.name }}( 负责人： {{ team?.fzr }} )</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <el-table :data="tableDate" border stripe>
      <el-table-column
        v-for="col in columns"
        :prop="col.prop"
        :key="col.id"
        :label="col.label"
        :width="col.width"
      >
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped lang="scss">
.page-team {
  @apply w-full h-full;
}
</style>
